<template>
  <div>
    <el-card v-if="formFlag" class="box-card">
      <div slot="header" class="clearfix">
        <span>流程表单内容</span>
      </div>
      <uni-async-form v-if="formUrl" ref="processForm" :keep-alive="true" :path="formUrl">
      </uni-async-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>流程审批进度</span>
      </div>
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
        remote-sort @sort-change="dataListSortChangeHandle">
        <vxe-table-column type="index" width="50"></vxe-table-column>
        <vxe-table-column field="name" title="任务名称" width="180"></vxe-table-column>
        <vxe-table-column field="assignee" title="处理人" width="150">
          <template slot-scope="scope">
            {{ scope.row.assigneeName }}({{ scope.row.assignee }})
          </template>
        </vxe-table-column>
        <vxe-table-column field="deleteReason" title="审批操作" width="100"></vxe-table-column>
        <vxe-table-column field="comment" title="审批意见"></vxe-table-column>
        <vxe-table-column field="duration" title="耗时">
          <template slot-scope="scope">
            {{ millsToTime(scope.row.duration) }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="createTime" sortable title="创建时间" width="180"></vxe-table-column>
        <vxe-table-column field="endTime" sortable title="完成时间" width="180"></vxe-table-column>
        <vxe-table-column title="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.endTime" size="success">已办理</el-tag>
            <el-tag v-else size="small" type="info">待处理</el-tag>
          </template>
        </vxe-table-column>
      </vxe-table>
    </el-card>
    <process-image ref="processImg"></process-image>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import ProcessImage from './process-image'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListIsPage: false
      },
      imgUrl: '',
      formUrl: '',
      formFlag: false,
      formId: '',
      dataForm: {
        id: '',
        name: '',
        procName: ''
      }
    }
  },
  components: {
    ProcessImage
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        console.log(this.$route.params)
        this.dataForm.id = this.$route.params.procBizId
        this.dataForm.procInstId = this.$route.params.procInstId
        this.formId = this.$route.params.formId
        this.formFlag = this.$route.params.formFlag
        this.mixinViewModuleOptions.getDataListURL = `/act/running/historicFlow/${this.dataForm.id}`
        this.getDataList()
        if (this.formFlag) {
          this.getFormUrl()
        }
        this.$refs.processImg.init()
      })
    },
    getFormUrl () {
      this.$http.get(`flowable/bpmFormUrl/form/${this.formId}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.formUrl = res.data.pc.url
      }).catch(() => { })
    },
    millsToTime (mills) {
      if (!mills) {
        return ''
      }
      let s = mills / 1000
      if (s < 60) {
        return s.toFixed(0) + ' 秒'
      }
      let m = s / 60
      if (m < 60) {
        return m.toFixed(0) + ' 分钟'
      }
      let h = m / 60
      if (h < 24) {
        return h.toFixed(0) + ' 小时'
      }
      let d = h / 24
      if (d < 30) {
        return d.toFixed(0) + ' 天'
      }
      let month = d / 30
      if (month < 12) {
        return month.toFixed(0) + ' 月'
      }
      let year = month / 12
      return year.toFixed(0) + ' 年'
    }
  }
}
</script>
